<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传（支持相对路径）</title>
</head>
<body>
<h2>上传文件到指定相对路径</h2>

<form action="/file" method="post" enctype="multipart/form-data">
    <!-- 文件选择 -->
    <div>
        <label for="file">选择文件：</label>
        <input type="file" id="file" name="file" required>
    </div>
    <!-- 提交按钮 -->
    <button type="submit">上传</button>
</form>

<!-- 显示上传结果 -->
<div id="result" style="margin-top: 20px;"></div>

<script>
    // 可选：动态显示上传结果
    document.querySelector('form').addEventListener('submit', async (e) => {
        e.preventDefault();
        // 1. 单独获取文件
        const fileInput = e.target.querySelector('input[type="file"]');
        const file = fileInput.files[0];

        // 2. 创建新的 FormData，仅添加文件
        const formData = new FormData();
        formData.append('file', file); // 键名必须与后端 @RequestParam 一致

        // 3. 提交
        const response = await fetch('/book/29/cover', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        document.getElementById('result').innerHTML =
            `状态: ${result.code === 200 ? '成功' : '失败'} <br>
                 路径: ${result.data || result.message}`;
    });
</script>
</body>
</html>